﻿var station = "/asset/get/s/data-1541731396688-pzJQAQFZ_.json";

var map = Loca.create('chart-panel', {
    mapStyle: 'amap://styles/blue',
    features: ['bg', 'road'],
    pitch: 52,
    viewMode: '2D'
});

var infoWin;
map.on('mapload', function() {
    infoWin = new AMap.InfoWindow({
        closeWhenClickMap: true
    });
    map.getMap().plugin(['AMap.ControlBar'], function() {
        var controlBar = new AMap.ControlBar({
            position: {
                right: '0',
                bottom: '-173px'
            }
        });
        map.getMap().addControl(controlBar);
    });
    map.getMap().plugin(['AMap.MapType'], function() {
        var mapType = new AMap.MapType({
            liteStyle: true
        });
        map.getMap().addControl(mapType);
    });
    map.getMap().plugin(['AMap.Scale'], function() {
        var scale = new AMap.Scale();
        map.getMap().addControl(scale);
    });
    map.getMap().plugin(['AMap.ToolBar'], function() {
        var toolBar = new AMap.ToolBar();
        map.getMap().addControl(toolBar);
    });
    map.getMap().on('complete', function() {
        $('#chart-panel').find('.amap-maptype-con').trigger('click');
        $.getJSON(station, function(data) {

            data = data.map(function(item) {
                return {
                    lnglat: [item.value[0], item.value[1]],
                    aqi: item.value[2]
                }
            });
            var layer = Loca.visualLayer({
                container: map,
                type: 'heatmap',
                shape: 'district',
                fitView: true,
                eventSupport: true,
                drillDown: false,
                fitView: true
            });



            layer.setData(data, {
                lnglat: 'lnglat',
                value: 'aqi'
            });
            layer.setOptions({
                adcode: map.getMap().getAdcode(),
                displayBlank: true,

                mode: 'mean',
                style: {
                    blankFill: 'gray',
                    color: ["#43ce17", "#efdc31", "#fa0", "#ff401a", "#d20040", "#9c0a4e"],
                    height: [0, 52100],
                    opacity: 0.88,
                    selectStyle: false
                }
            })
            layer.render();
            layer.on('click', function(ev) {
                var originalEv = ev.originalEvent;
                var amap = map.getMap();
                var lnglat = amap.containerToLngLat(new AMap.Pixel(originalEv.clientX, originalEv.clientY));
                var feature = ev.feature;
                var value = ev.value;
                var property = feature.subFeature.properties;
                var content = [
                    property.name,
                    '<br>',
                    'AQI：' + value.toFixed(2),
                    '<br>',
                    property.childrenNum ? '<button class="up">下钻</button>' : '',
                    '<button class="down">上浮</button>'
                ];
                infoWin.setContent(content.join(''));
                infoWin.open(amap, lnglat);

                $(infoWin.getContentDom()).find('button.up').unbind().bind('click', function() {
                    infoWin.close();
                    layer.goto(property.adcode);
                });
                $(infoWin.getContentDom()).find('button.down').unbind().bind('click', function() {
                    infoWin.close();
                    layer.goto(-1);
                });
            });

            var Player = Loca.visualLayer({
                container: map,
                type: 'point',
                shape: 'circle',
            });
            Player.setData(data, {
                lnglat: 'lnglat',
                value: 'aqi'
            })
            Player.setOptions({
                style: {
                    unit: 'meter',
                    opacity: 0.521,
                    radius: 2,
                    fill: function(res) {
                        var aqi = res.value.aqi;
                        var color = 'gray';
                        if (aqi <= 50) {
                            color = '#43ce17';
                        } else if (aqi <= 100) {
                            color = '#efdc31';
                        } else if (aqi <= 150) {
                            color = '#fa0';
                        } else if (aqi <= 200) {
                            color = '#ff401a';
                        } else if (aqi <= 300) {
                            color = '#d20040';
                        } else {
                            color = '#9c0a4e';
                        }
                        return color;
                    }
                }
            });
            Player.render();

            /* setTimeout(function() {
                 AMapUI.load(['ui/geo/DistrictCluster'], function(DistrictCluster) {

                 var distCluster = new DistrictCluster({
                    // zIndex: 500,
                     autoSetFitView: false,
                     map: map.getMap(), //所属的地图实例
                     // topAdcodes: [map.getMap().getAdcode()],
                     getPosition: function(item) {
                         //返回经纬度
                         return item.lnglat;
                     }
                 });
                 distCluster.setData(data);
             });
             }, 100);*/


        })
    });
});
